<template>
    <div>
        <div class="box23 mask" v-if="myOpen">
            <i class="el-icon-circle-close icon2" @click="close"></i>
            <div class="mask_content ">
                <video width="800" height="600" controls>
                    <source :src="url" type="video/mp4">
                    您的浏览器不支持Video标签。
                </video>

            </div>
        </div>
    </div>
</template>  
    
<script>
export default {
    props: {
        isOpens: {
            type: Boolean,
            required: true,
            default: false
        },
        url: {
            type: String,
            required: true,
            default: ''
        },
    },
    //props: ['isOpens','url'],
    data() {
        return {
           // myVideo: require('@/assets/video/chongqing.mp4'),
            // isOpen: true
        };
    },
    created() {
        //console.log(this.url,'aaa');
    },
    computed: {
        myOpen: {
            get() {
              //  console.log(this.url,'aaa');
                return this.isOpens
            },
            set() {
                return this.$emit('updateProps', false)
            }
        }
    },
    methods: {
        close() {
          //  console.log(123);
            //  this.$emit('updateProp', false)
            this.$emit('updateProps', false)
            //  this.isOpen = false
        }
    }
};
</script>
<style lang="scss" scoped>
.box23 {

    .mask_content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: red;
        position: absolute;
        z-index: 99999;

    }

}

.mask {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 9999 !important;

}

.icon2 {
    display: flex;
    justify-content: end;
    padding-right: 40px;
    cursor: pointer;
    padding-top: 40px;
    color: white;
    font-size: 50px;
}
</style>